<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div style="height: 15px;"></div>
        <div class="row">
            <div class="col-sm-3 m-b-xs">
                <!--<div>
                    <a href="javascript:void(0);" @click="onRefresh" class="btn btn-white btn-bitbucket pull-left" ><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                    <a href="javascript:void(0);" @click="onRefresh" class="btn btn-white btn-bitbucket pull-right" ><i class="fa fa-barcode"></i>&nbsp;扫码</a>
                    <div class="clearfix"></div>
                </div>-->
                <div style="background-color: pink; padding: 3px 15px;">
                    使用情况:&nbsp;&nbsp;
                    <label @click="onRadioChecked('bc', '0')">
                        <input type="radio" :checked="bc == '0'" name="radioBC">&nbsp;全部
                    </label>
                    &nbsp;&nbsp;
                    <label @click="onRadioChecked('bc', '1')">
                        <input type="radio" :checked="bc == '1'" name="radioBC">&nbsp;已使用
                    </label>
                    &nbsp;&nbsp;
                    <label @click="onRadioChecked('bc', '2')">
                        <input type="radio" :checked="bc == '2'" name="radioBC">&nbsp;未使用
                    </label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="input-group">
                    <input v-model="startDate" type="text" class="form-control" readonly placeholder="开始日期" id="start">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
            <div class="col-sm-3 m-b-xs">
                <div class="input-group">
                    <input v-model="endDate" type="text" class="form-control" readonly placeholder="结束日期" id="end">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="input-group">
                    <input type="text" placeholder="请输入床网条码" v-model="keyword" class="input form-control" @keyup.enter="onSearch">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" @click="onClear">清除</button>
                    </span>
                </div>
            </div>
        </div>
        <div style="height: 5px;"></div>
        <div class="row">
            <div class="col-sm-3">
                <select class="input form-control inline" v-model="fSupplierCode"  @change="onSearch">
                    <option :value="0">全部厂家</option>
                    <option v-for="(info, index) in supplierList" :value="info.fSupplierCode">{{info.fSupplierCode}}</option>
                </select>
            </div>
            <div v-if="view == '1'" class="col-sm-2">
                <div style="background-color: #f0ad4e; padding: 8px 15px;">
                    床网数量合计：{{cwTotal}}
                </div>
            </div>
            <div v-if="view == '1'" class="col-sm-2">
                <div style="background-color: #d0e9c6; padding: 8px 15px;">
                    已使用数量合计：{{cwUse}}
                </div>
            </div>
            <div v-if="view == '1'" class="col-sm-2">
                <div style="background-color: #9ed99d; padding: 8px 15px;">
                    未使用数量合计：{{cwTotal - cwUse}}
                </div>
            </div>
            <div v-if="view == '2'" class="col-sm-2">
            </div>
            <div v-if="view == '2'" class="col-sm-2">
            </div>
            <div v-if="view == '2'" class="col-sm-2">
            </div>
            <div class="col-sm-2">
                <input type="file" class="importExcel" style="display: none;" @change="importExcel">
                <a href="javascript:void(0);" class="btn btn-warning inline" style="display:table-cell;" title="导入Excel" onClick='$(".importExcel").click();'>导入Excel</a>
                <form id="exportExcelForm" method="post" action="/System/Auth09/exportExcel.html" enctype="multipart/form-data" class="input-group display-none"></form>
                <a href="javascript:void(0);"  @click="onExportExcel" class="navbar-minimalize btn green-bg color-white"><i class="fa fa-download"></i>&nbsp;<span>导出Excel</span></a>
            </div>
            <div class="col-sm-1">
                <div data-toggle="buttons" class="btn-group pull-right">
                    <button class="btn btn-sm btn-white active" @click="onSelectView('1')">
                        <input type="radio" id="option1" name="options">总
                    </button>
                    <button class="btn btn-sm btn-white" @click="onSelectView('2')">
                        <input type="radio" id="option2" name="options">细
                    </button>
                </div>
            </div>
        </div>
        <div style="height: 5px;"></div>
        <div v-if="view == '1'" class="table-responsive">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>厂家代码</th>
                    <th>床网型号</th>
                    <th>床网名称</th>
                    <th>床网描述</th>
                    <th>床网数量</th>
                    <th>已使用数量</th>
                    <th>未使用数量</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(info, index) in snList"  :class="index | _getRowsColor">
                    <td>{{info.fSupplierCode}}</td>
                    <td>{{info.fModelCodeCW}}</td>
                    <td>{{info.fModelNameCW}}</td>
                    <td>{{info.fModelDescCW}}</td>
                    <td>{{info.fTotal}}</td>
                    <td>{{info.fUse}}</td>
                    <td>{{info.fTotal - info.fUse}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div v-if="view == '2'" class="table-responsive">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>操作</th>
                    <th>条码</th>
                    <th>厂家代码</th>
                    <th>床网型号</th>
                    <th>床网名称</th>
                    <th>床网描述</th>
                    <th>记录时间</th>
                    <th>制令编号</th>
                    <th>使用时间</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(info, index) in snList"  :class="index | _getRowsColor">
                    <td><button type="button" class="btn pink-bg color-white" @click="onDel(index)">删除</button></td>
                    <td>{{info.barcode}}</td>
                    <td>{{info.fSupplierCode}}</td>
                    <td>{{info.fModelCodeCW}}</td>
                    <td>{{info.fModelNameCW}}</td>
                    <td>{{info.fModelDescCW}}</td>
                    <td>{{info.sync_datetime | _formatDate}}</td>
                    <td>{{info.fMONo}}</td>
                    <td>{{info.create_datetime | _formatDate}}</td>
                </tr>
                </tbody>
            </table>
            <div v-if="totle > 0">
                <a v-if="snList.length == totle" class="btn btn-default btn-rounded btn-block" href="javascript:void(0);">{{snList.length}} / {{totle}} 已到底了</a>
                <a v-if="snList.length < totle" class="btn btn-default btn-rounded btn-block pink-bg" href="javascript:void(0);" @click="onMoreSnList">{{snList.length}} / {{totle}} 点击加载更多</a>
            </div>
        </div>

    </div>
</div>